<template>
  <div class="gallery_QRcode bgWhite">
    <div>
      <p class="title">二维码生成器</p>
      <p class="tip_url">请输入需要生成二维码的内容:</p>
      <el-form   label="right" :rules="rules" :model="form" ref="form" >
        <el-form-item  prop="url">
          <el-input v-model="form.url"  clearable></el-input>
          <el-button type="search" @click="validate" >生成二维码</el-button>
          <el-button @click="downloadImg">下载二维码</el-button>
        </el-form-item>
      </el-form>
      <div class="qrcode" ref="qrCodeUrl" style="display:none"></div>
      <div class="qrcodeContainer" v-if="QRCodeArray.length>0">
          <div v-for="(item, index) in QRCodeArray" :key="index" :class="{'active':item.active}"  track-by="$index" @click="chooseDownload(index)">
              <span class="icon_delete" @click.stop="removeQRCode(index)">
                <svg class="icon-delect_normal" >
                  <use xlink:href="#icon-delect_normal"></use>
                </svg>
                <svg class="icon-delect_hover" >
                  <use xlink:href="#icon-delect_hover"></use>
                </svg>
              </span>
            
              <img  :src="item.imgSrc.src" v-if="item.imgSrc">
              <p>{{item.name}}</p>
          </div>
      </div>

    </div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2'
export default {
  name: 'QRcode',
  data () {
    return {
      rules:{
        url:[
          { required: true, message: '请输入需要转为二维码的内容！', trigger: 'blur' },
        ],
      },
      form:{
        url: "",
      },
      inputOld: [],
      QRCodeArray: [],
      downloadList: []
    }
  },
  methods:{
    validate() {
      let that = this
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let input = that.form.url.trim()
          let isGenerate = that.inputOld.indexOf(input) > -1
          if ( that.inputOld.length > 0 && isGenerate) {
            that.$message.warning('该内容已生成二维码')
            return false
          } else {
            that.creatQrCode();
          }
           
        } else {
          return false;
        }
      });
    },
    creatQrCode() {
      let that = this
      let input = that.form.url.trim()
      that.$refs.qrCodeUrl.innerHTML = ''
      that.qrcode = new QRCode(that.$refs.qrCodeUrl, {
          text: input, // 需要转换为二维码的内容
          width: 400,
          height: 400,
          colorDark: '#000000',
          colorLight: '#ffffff',
          correctLevel: QRCode.CorrectLevel.H
      })
      that.inputOld.push(input)
      let obj = {
          name: input,
          imgSrc: that.$refs.qrCodeUrl.lastChild,
          value: input,
          active: false
      }
      setTimeout(function () {
          that.$set(that.QRCodeArray, that.QRCodeArray.length, obj)
      }, 1000)
    },
    downloadImg () {
      let downloadImgs = this.downloadList
      if (downloadImgs.length > 0) {
        for (let i = 0; i < downloadImgs.length; i++) {
          let a = document.createElement('a')
          a.href = downloadImgs[i].imgSrc.src
          let name = downloadImgs[i].name.replace(/[^a-zA-Z0-9]+/g, '_')
          a.download = 'QRcode_' + name
          a.click()
        }
      } else {
        this.$message.warning('请选中需要下载的二维码')
      }
    },
    removeQRCode (index) {
      let inputSrc = this.inputOld[index]
      this.inputOld.splice(index, 1)
      let downloadList = this.downloadList
      for (let i = 0; i < downloadList.length; i++) {
          if (downloadList[i].value === inputSrc) {
              this.downloadList.splice(i, 1)
          }
      }
      this.QRCodeArray.splice(index, 1)
    },
    chooseDownload (index) {
      // 选择准备下载
      let activeObj = this.QRCodeArray[index]
      activeObj.active = !activeObj.active
      this.$set(this.QRCodeArray, index, activeObj)
      if (activeObj.active) {
          this.downloadList.push(activeObj)
      } else {
          this.downloadList.splice(index, 1)
      }
    }
  }

}
</script>

<style lang="scss">
@import '@/styles/gallery/QRcode.scss';
</style>